<template>
  <div style="width: 100%;text-align: initial;line-height: 0px;background-color: white;height: 100%;padding: 0px;position: relative">
    <div style="width: 60%;margin-left: 20%;margin-top: 40px;position: absolute">
      <p style="text-align: center;margin-bottom: 20px">请填写项目不同阶段的时间和任务</p>
      <el-steps :active="active" finish-status="success">
        <el-step title="第一阶段"></el-step>
        <el-step title="第二阶段"></el-step>
        <el-step title="第三阶段"></el-step>
      </el-steps>
      <div style="width: 400px;height: 400px;margin-left:30%;line-height: 0px" v-if="active===1" >
        <div style="width: 400px;height: 400px;background-color: rgba(0,0,0,0.45);text-align: center;border-radius: 10px">
          <p style="font-size: 28px;font-family: '楷体';padding-top: 20px">第一阶段</p>
          <hr style="width: 90%;height: 0.01px"/>
          <div style="margin-top: 20px">
            <div style="margin-top: 40px;text-align: left;line-height: 40px">
              <div>
                截止日期： {{this.data1}}
              </div>
              <div>
                阶段任务： {{this.task1}}
              </div>
              <div style="width: 100%;margin-top: 0px;height: 48px">
                <form style="width: 100%;height: 48px">
                  <p style="width: 100%;margin-left: 100px; text-align: left;">请上传该阶段代码和文档</p>
                  <input type="file" @change="getFile($event)" >
                  <button class="button button-primary button-pill button-small" @click="submite($event)">上传</button>
                </form>
              </div>

              <div style="margin-top: 60px;margin-left: 170px ">
                <el-button type="primary" @click="dom">提交</el-button>
              </div>

            </div>
          </div>
        </div>
      </div>
      <div style="width: 400px;height: 400px;margin-left:30%" v-if="active===2"  >
        <div style="width: 400px;height: 400px;background-color: rgba(0,0,0,0.45);text-align: center;border-radius: 10px">
          <p style="font-size: 28px;font-family: '楷体';padding-top: 20px">第二阶段</p>
          <hr style="width: 90%;height: 0.01px"/>
          <div style="margin-top: 20px">
            <div style="margin-top: 40px;text-align: left;line-height: 40px">
              <div>
                截止日期： {{this.data2}}
              </div>
              <div>
                阶段任务： {{this.task2}}
              </div>
              <div style="width: 100%;margin-top: 0px;height: 48px">
                <form style="width: 100%;height: 48px">
                  <p style="width: 100%;margin-left: 100px; text-align: left;">请上传该阶段代码和文档</p>
                  <input type="file" @change="getFile($event)" >
                  <button class="button button-primary button-pill button-small" @click="submit($event)">提交</button>
                </form>
              </div>

            </div>
          </div>
        </div>
      </div>
      <div style="width: 400px;height: 400px;margin-left:30%" v-if="active===3" >
        <div style="width: 400px;height: 400px;background-color: rgba(0,0,0,0.45);text-align: center;border-radius: 10px">
          <p style="font-size: 28px;font-family: '楷体';padding-top: 20px">第三阶段</p>
          <hr style="width: 90%;height: 0.01px"/>
          <div style="margin-top: 20px">
            <div style="margin-top: 40px;text-align: left">
              <div>
                截止日期：  <el-input  type="date" v-model="data3" placeholder="该阶段截止日期" style="width: 60%;margin-top: 30px"></el-input>
              </div>
              <div>
                阶段任务：   <el-input style="width: 60%;margin-top: 30px" type="textarea" :rows="2" placeholder="该阶段任务" v-model="textarea3"></el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--<div style="margin-left: 45%">-->
        <!--<el-button style="margin-top: 12px;" @click="nextt" v-if="active==3||active==2">上一步</el-button>-->
        <!--<el-button style="margin-top: 12px" @click="next" v-if="active==1||active==2">下一步</el-button>-->
        <!--<el-button style="margin-top: 12px" @click="dom" v-if="active==3">提交</el-button>-->
      <!--</div>-->

    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        gid:'',
        active: 1,
        task1:'',
        task2:'',
        task3:'',
        data1:'',
        data2:'',
        data3:'',
        docUrl:'',
        file:''
      };
    },

    mounted: function () {
      this.gid= this.$route.query.id
      axios.post('/user/findStep',{
       oid:this.gid,
       id:this.gid
      }).then((response) => {
        if(response.data!=''&&response.data!=null){
          var ee=response.data
          console.log(ee)

          var data11= ee.data1.split("T")
          var data22=ee.data2.split("T")
          var data33=ee.data3.split("T")

          console.log(data11)


          this.data1=data11[0]
          this. data2=data11[0]
          this.data3=data11[0]
           this.task1=ee.task1
           this.task2=ee.task2
           this.task3=ee.task3
        }else{
          // this.$notify.error({
          //   title: '错误',
          //   message: response.data.message,
          //   type: 'warning',
          //   duration:0
          // });
        }
      }).catch((response)=>{

      })






    },
    methods: {
      getFile: function (event) {
        this.file = event.target.files[0];
        console.log(this.file);
      },
      submit: function (event) {

        var _this=this
        event.preventDefault();
        let formData = new FormData();
        console.log(formData)
        formData.append("file", this.file)
        axios.post('/upload/singlefile', formData)
          .then(function (response) {
            //   console.log(response)
            alert("上传成功");
            var a= response.data;
            //  var e=a.split("*");
            //console.log(e[1])
            _this.docUrl=a;

            // window.location.reload();
          })
          .catch(function (error) {
            alert("上传失败");
            console.log(error);
            //window.location.reload();
          });
      },


      jump() {
        this.$router.push({
          path: '/Projecting',
          query: {
            mallCode:27
          }
        })

      },
      next() {
        if (this.active++ > 2) this.active = 0;
      },
      nextt() {
        --this.active;
        if (this.active<0) this.active = 0;
      },
      dom(){
        axios.post('/company/insertStep',{
          oid :this.gid,
          task1:this.docUrl,

        }).then((response) => {
          if(response.data.states=800){
            this.$notify({
              title: '成功',
              message: '注册成功',
              type: 'success',
              duration:1000
            });
            this.jump()
          }else{
            this.$notify.error({
              title: '错误',
              message: response.data.message,
              type: 'warning',
              duration:0
            });
          }
        }).catch((response)=>{

        })




        console.log(this.gid)
        console.log(this.data1)
        console.log(this.textarea1)
        console.log(this.data2)
        console.log(this.textarea2)
        console.log(this.data3)
        console.log(this.textarea3)

      }




    }
  }
</script>
